<div class="base-grid">
  <div ref:controls style="grid-column: text;">
    <label>Grid size: </label>
    <label><input type=radio bind:group=gridSize value={0}> 20x20</label>
    <label><input type=radio bind:group=gridSize value={1}> 40x40</label>
    <label><input type=radio bind:group=gridSize value={2}> 80x80</label>
    <label><input type=radio bind:group=gridSize value={3}> 160x160</label>

    <label style="float: right;"><input type=checkbox bind:checked=showLabels> attribution labels</label>
  </div>
</div>


<div class="atlas" style="grid-column: screen;">
  <ResponsiveResizer {clientWidth} {clientHeight} minWidth={1000}>
    <Atlas ref:atlas id="inceptionv1_{layerName}" bind:gridSize bind:showLabels scaleCountFactor=200 {iconCrop} disableBehaviors={true}/>
  </ResponsiveResizer>
</div>

<script>
export default {
  components: { 
    Atlas: "../Atlas.html",
    ResponsiveResizer: "../library/ResponsiveResizer.html"
  },
  data() {
    return {
      layerName: "mixed4c",
      gridSize: 1,
      iconCrop: 0.4,
    }
  },
  oncreate() {
    setTimeout(() => {
      this.refs.atlas.home();
    }, 100)
  },
  onupdate({changed, current, previous}) {

  }
}
</script>

<style>
  ref:controls {
    font-size: 12px;
  }
  input {
    margin-left: 8px;
  }
  .atlas {
    position: relative;
    height: calc(100vw - 40px);
    margin: 20px;
  }
  .column {
    position: relative;
    height: 300px;
  }
</style>